<template>
    <view class="pub_header"
        :style="{ 'padding': `${statusBarHeight}px 0 0 0`, 'height': headerHeight, 'background-color': header_config.header_color }">
        <!-- 左侧 -->
        <view class="h_left" @click="headerClick('left')" v-if="deviceType != 'mp-alipay'">
            <image class="icon" mode="aspectFill" :src="backSrc[header_config.left_content]" />
        </view>

        <!-- 标题 -->
        <view class="h_title pub_font" :style="{ 'color': header_config.title_color }">{{ header_config.title }}</view>
    </view>
</template>

<script>
export default {
    props: {
        //组件标识
        headerName: {
            type: String,
            default: '',
        },
        //标题栏配置
        headerConfig: {
            type: Object,
            default: () => { return {} }
        }
    },
    data() {
        return {
            statusBarHeight: getApp().globalData.statusBarHeight,//状态栏高度
            headerHeight: getApp().globalData.headerHeight,//标题栏高度
            deviceType: getApp().globalData.deviceType,//
            backSrc: {
                dark: '/static/back/dark.png',
                white: '/static/back/white.png',
            },
            header_config: {
                header_color: '',//标题栏背景色

                left_content: 'dark',//左侧内容  返回按钮类型(dark,white)

                title_type: 1,//标题显示类型  1居中  2居左（有箭头）  3居左（无箭头）
                title: '',//标题栏内容
                title_color: '#000000',//标题栏文字颜色
            },
        };
    },
    watch: {
        headerConfig: {
            handler() {
                // console.log(JSON.stringify(this.headerConfig));
                if (JSON.stringify(this.headerConfig) != '{}') {
                    //根据初始值进行判断 更新传入的键值对数据
                    for (let key in this.$options.data().header_config) {
                        if (key in this.headerConfig) {
                            this.header_config[key] = this.headerConfig[key];
                        }
                    }
                } else {
                    Object.assign(this.$data.header_config, this.$options.data().header_config);
                }
            },
            immediate: true,
            deep: true
        },
    },
    onLoad() { },
    methods: {
        headerClick(type) {
            if (type == 'left') {
                this.$comFun.closeWin();
                return;
            }
            this.$emit('headerBack', {
                type: type,
                name: this.headerName
            });
        }
    },
};
</script>

<style lang="scss" scoped></style>
